<template>
	<view class="transaction-analysis">
		<g-navbar title="交易分析" />
		<view class="main" v-if="transactionData.data">
			<view class="statistical-data-container">
				<view class="title">
					交易与业绩
				</view>
				<view class="data-item-wrapper" v-for="item,key,index in transactionData.data" :key="index">
					<view class="sub-title-wrapper">
						<view class="sub-title">
							{{transactionData.titleList[key]}}
						</view>
					</view>
					<view class="data-main-list-wrapper" v-if="key !== 'year_trade'">
						<view class="data-sub-item" v-for="subitem,subkey,subindex in item" :key="subindex">
							<view class="value">
								{{subitem}}
							</view>
							<view class="label">
								{{transactionData.labelList[subkey]}}
							</view>
						</view>
					</view>
					<view class="transaction-statistics-wrapper" v-else>
						<view class="charts-box">
							<qiun-data-charts type="line" :chartData="chartData" />
						</view>
					</view>
				</view>
			</view>
			<!-- 		<view class="transaction-statistics-container">
				<view class="title">
					1212121
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :chartData="chartData" />
				</view>
			</view> -->
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, computed, ComputedRef, nextTick } from "vue";
	import { ITransactionData, ITransaction, IDateItem } from './types';
	import dayjs from 'dayjs';
	import REST_URL from "@/http/http.restUrl";
	import { useStore } from 'vuex';
	import { onLoad, onReady } from '@dcloudio/uni-app';
	import { GET_STORE_USERINFO } from '@/store/gettersType';

	const store = useStore();

	const transactionData : ITransaction = reactive({
		data: null,
		titleList: {
			myself: '个人交易金额与激活量统计',
			team: '团队交易金额与激活量统计',
			merchant: '商户交易金额与激活量统计',
			year_trade: '半年内销售统计',
		},
		labelList: {
			total_trade: '交易量（元）',
			activate_num: '激活量（台）',
			trade_earnings: '交易收益（元）',
			activate_earnings: '激活收益（元）'
		}
	})


	const chartsDateList : ComputedRef<string[]> = computed(() => {
		let temp : string[] = [];
		if (!transactionData.data) return temp;
		for (let key in transactionData.data.year_trade) {
			temp.unshift(transactionData.data.year_trade[key].date);
		}
		return temp
	})

	const chartsAmountList : ComputedRef<number[]> = computed(() => {
		let temp : number[] = [];
		if (!transactionData.data) return temp;
		for (let key in transactionData.data.year_trade) {
			temp.unshift(transactionData.data.year_trade[key].amount);
		}
		return temp
	})


	const chartData = reactive({
		categories: chartsDateList.value,
		series: [
			{
				name: '交易量',
				data: chartsAmountList.value,
			}
		]
	})

	const statisticsListInit = (dateList : { [propname : string] : IDateItem } = {}) : void => {
		for (let i = 0; i < 6; i++) {
			const dateStr : string = dayjs().subtract(i, 'month').startOf(i === 6 - 1 ? 'month' : 'second').format('YYYY-MM');
			const temp : IDateItem = {
				date: dayjs(dateStr).format('YY-MM'),
				amount: dateList[dateStr] ? dateList[dateStr].amount : 0,
				count: dateList[dateStr] ? dateList[dateStr].count : 0,
			}
			transactionData.data!.year_trade![dateStr] = temp;
		}
	}




	const resetCharts = () => {
		chartData.categories = chartsDateList.value;
		chartData.series[0].data = chartsAmountList.value;
	}


	const getTransactionData = async () : Promise<void> => {
		const result : ITransactionData = (await uni.http.POST(REST_URL.transactionData, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			start_month: dayjs().subtract(5, 'month').startOf('month').format('YYYY-MM-DD'),
			end_month: dayjs().subtract(0, 'month').format('YYYY-MM-DD'),
		})).data
		transactionData.data = result;
		statisticsListInit(transactionData.data.year_trade);
		resetCharts();
	}

	onLoad(async () => {
		await uni.loginManger.$interceptor;
		getTransactionData();
	})
</script>

<style scoped lang="scss">
	@import "./transactionAnalysis.scss";
</style>